<template>
  <KView class="sys-loading flex-central" :class="{'has-mask':mask}">
    <KView class="sys-loading-div" :style="loadingStyle"></KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  export default {
    props: {
      mask: {
        type: Boolean,
        default: false
      },
      size: {
        type: Number,
        default: 40
      }
    },

    computed: {
      loadingStyle() {
        let size = this.size;
        if (typeof size === 'number') {
          size = SystemUtil.formatPx(size);
        }
        return {
          width: size,
          height: size,
        };
      }
    },

    data() {
      return {};
    }
  };

</script>

<style lang="scss">
  .sys-loading {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 30;

    &.has-mask{
      background: rgba(0, 0, 0, .3);
    }

    .sys-loading-div {
      animation: wx-button-loading-animate 1s steps(12, end) infinite;
      background: transparent url() no-repeat;
      background-size: 100%;
    }
  }

</style>
